<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>账单列表</title>

    <!--<div th:replace="head"></div>
    <link rel="stylesheet" href="/static/css/dataTables.bootstrap.css"/>-->

    <th:block th:include="include :: header('bootstrap')" />
    <script type="text/javascript" th:src="@{/static/js/My97DatePicker/WdatePicker.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/My97DatePicker/lang/zh-cn.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/jquery/jquery-1.10.2.min.js}"></script>
</head>

<!--<script th:src="@{/static/js/jquery.min.js}"></script>-->
<body class="container ">


<div class="with:80%">
    <!-- TODO 回显查询数据-->
    <form class="form-inline" action="" id="detail" method="get">

        <div class="form-group">
            <label class="control-label">类型</label>&nbsp;
            <select th:name="type" class="form-control">
                <option value="0">全部</option>
                <option th:each="item:${typeList}"
                        th:value="${item.typeId}"
                        th:text="${item.typeName}"
                        th:selected="${item.typeId}+''== ${#strings.trim(searchVo.type)}"></option>
            </select>&nbsp;
        </div>
        <div class="form-group">
            <label for="date1" class="control-label">开始时间</label>&nbsp;
            <input type="text" class="form-control" name="startTime" id="date1" placeholder="开始时间" th:value="${searchVo.startTime}"
                   onclick="WdatePicker()"/>&nbsp;
        </div>
        <div class="form-group">
            <label for="date2" class="control-label">结束时间</label>&nbsp;
            <input type="text" class="form-control" name="endTime" id="date2" placeholder="结束时间" th:value="${searchVo.endTime}"
                   onclick="WdatePicker()"/>&nbsp;
        </div>
        <div class="form-group">
            <input type="submit" value="查询" class="btn btn-info"/>
            &nbsp; &nbsp;
            <button id="reset" class="btn btn-info">重置</button>
            &nbsp; &nbsp;
        </div>
        <label th:if="${userName == null}">
            <input type="hidden" th:name="token" th:if="${searchVo.token!=null}" th:value="${searchVo.token}"/>
            <input type="hidden" th:name="customerId" th:if="${searchVo.customerId!=null}" th:value="${searchVo.customerId}"/>
        </label>
    </form>
</div>
<br/>

<div>
    <button id="index"  onclick="index()" class="btn btn-info">返回首页</button>
    用户为:<input type="text" readonly th:value="${searchVo.customerId}" class="btn btn-info"/>
    <label th:if="${userName != null}">
        账号是:<input type="text" readonly  th:value="${userName}" class="btn btn-info"/>
    </label>
    
</div>
<div class="with:80%">

    <table id="dataTable" class="table table-bordered table-striped">
        <thead>
        <tr>
            <th style="text-align: center">记录ID</th>
            <th style="text-align: center">日期</th>
            <th style="text-align: center">方式</th>
            <th style="text-align: center">类型</th>
            <th style="text-align: center">金额</th>
            <th style="text-align: center">支付时间</th>
            <th style="text-align: center">来源</th>
            <th style="text-align: center">去向</th>
            <th style="text-align: center">备注</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="bill : ${queryBill.getResults()}">
            <td style="text-align: center" th:text="${bill.recordId}"></td>
            <td style="text-align: center" th:text="${bill.date}">label</td>
            <td style="text-align: center" th:text="${bill.modeName}">label</td>
            <td style="text-align: center" th:text="${bill.typeName}">label</td>
            <td th:if="${bill.modeName} == '支出'" style="text-align: center;color: #FF0000" th:text="'-'+${bill.money}">

            </td>
            <td th:if="${bill.modeName} == '收入' and ${bill.type} != 25" style="text-align: center;color: 
                                        #90EE90"
                th:text="'+'+${bill.money}">

            </td>
            <td th:if="${bill.modeName} == '收入' and ${bill.type} == 25" style="text-align: center;color: 
                                        #90EE90"
                th:text="'**'">

            </td>
            
            <td th:if="${bill.modeName} == '转账'" style="text-align: center;color: #008CBA"
                th:text="${bill.money}">

            </td>
            <!--<td style="text-align: center" th:text="${bill.money}">label</td>-->
            <td style="text-align: center" th:text="${#dates.format(bill.payTime,'yyyy-MM-dd HH:mm:ss')}">url</td>
            <td style="text-align: center" th:text="${bill.formName}">
                <!-- <span name="lock" title="切换状态"
                       th:data="@{/user/{id}/status(disable=${!item.disabled},id=${item.id})}"
                       style="cursor: pointer" class="glyphicon glyphicon-lock"></span>-->

            </td>
            <td style="text-align: center" th:text="${bill.to}">label</td>
            <td style="text-align: center" th:text="${bill.remark}">label</td>
        </tr>
        </tbody>
    </table>

    <div class="modal-footer no-margin-top">
        <div th:if="${queryBill.getPaging().getTotalPages() != 0}">
            <ul th:if="${userName == null}" class="pagination pull-right no-margin">

                <!-- 处理页数小于等于7 的情况 -->
                <ul th:if="${(queryBill.getPaging().getTotalPages() lt 7) && (queryBill.getPaging().getTotalPages() ge 0)}"
                    class="pagination pull-right no-margin">
                    <li th:each="pageNum:${#numbers.sequence(0, queryBill.getPaging().getTotalPages() - 1)}">
                        <a th:href="'/bill/to/view?currentPage=' + ${pageNum} +'&customerId='+${customerId}
                       + '&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}"  th:text="${pageNum + 1}"
                           th:if="${pageNum ne queryBill.getPaging().getCurrentPage()}">
                        </a>
                        <a th:href="'/bill/to/view?currentPage=' + ${pageNum} +'&customerId='+${customerId}
                       + '&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}" th:text="${pageNum + 1}"
                           th:if="${pageNum eq queryBill.getPaging().getCurrentPage()}"
                           th:style="'font-weight:bold;background: #6faed9;'"></a>
                    </li>
                </ul>

                <ul th:if="${(queryBill.getPaging().getTotalPages() ge 7)}"class="pagination pull-right no-margin">
                    <!-- 首页 -->
                    <li th:if="${queryBill.getPaging().getCurrentPage() ne 0}">
                        <a th:href="'/bill/to/view?currentPage=0&customerId='+${customerId} + '&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}">首页</a>
                    </li>

                    <!-- 上一页 -->
                    <li th:if="${queryBill.getPaging().getCurrentPage() gt 0}">
                        <a th:href="'/bill/to/view?currentPage=' + ${queryBill.getPaging().getCurrentPage()-1} +'&customerId='+${customerId}
                       + '&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}"
                           th:text="上一页"></a>
                    </li>

                    <!-- 当前页面小于等于4 -->
                    <li th:if="${queryBill.getPaging().getCurrentPage() le 4}"
                        th:each="pageNum:${#numbers.sequence(0,4)}">
                        <a th:href="'/bill/to/view?currentPage='+ ${pageNum} +'&customerId='+${customerId}
                       + '&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}" th:text="${pageNum + 1}"
                           th:if="${pageNum ne queryBill.getPaging().getCurrentPage()}">
                        </a>
                        <a th:href="'/bill/to/view?currentPage='+ ${pageNum} +'&customerId='+${customerId}
                       + '&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}" th:text="${pageNum + 1}"
                           th:if="${pageNum eq queryBill.getPaging().getCurrentPage()}"
                           th:style="'font-weight:bold;background: #6faed9;'">
                        </a>
                    </li>
                    <li th:if="${queryBill.getPaging().getCurrentPage() le 4}">
                        <a th:href="'/bill/to/view?currentPage=5' +'&customerId='+${customerId}
                       + '&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}">...</a>
                    </li>


                    <!-- 最后一页与当前页面之差小于等于3 -->
                    <li th:if="${queryBill.getPaging().getTotalPages()-queryBill.getPaging().getCurrentPage() le 3}">
                        <a th:href="'/bill/to/view?currentPage=' + ${queryBill.getPaging().getTotalPages() -5} +'&customerId='+${customerId}
                       + '&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}">...</a>
                    </li>
                    <li th:if="${queryBill.getPaging().getTotalPages()-queryBill.getPaging().getCurrentPage() le 3}"
                        th:each="pageNum:${#numbers.sequence(queryBill.getPaging().getTotalPages()-4,
                            queryBill.getPaging().getTotalPages()-1)}">
                        <a th:href="'/bill/to/view?currentPage='+ ${pageNum} +'&customerId='+${customerId}
                       + '&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}" th:text="${pageNum + 1}"
                           th:if="${pageNum ne queryBill.getPaging().getCurrentPage()}">
                        </a>
                        <a th:href="'/bill/to/view?currentPage='+ ${pageNum} +'&customerId='+${customerId}
                       + '&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}" th:text="${pageNum + 1}"
                           th:if="${pageNum eq queryBill.getPaging().getCurrentPage()}"
                           th:style="'font-weight:bold;background: #6faed9;'">
                        </a>
                    </li>

                    <!-- 最后一页与当前页面之差大于3 且当前页面大于4 -->
                    <li th:if="${(queryBill.getPaging().getCurrentPage() gt 4) && 
                            (queryBill.getPaging().getTotalPages()-queryBill.getPaging().getCurrentPage() gt 3)}">
                        <a th:href="'/bill/to/view?currentPage=' + ${queryBill.getPaging().getCurrentPage() -2} +'&customerId='+${customerId}
                       + '&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}">...</a>
                    </li>
                    <li th:if="${(queryBill.getPaging().getCurrentPage() gt 4) && 
                            (queryBill.getPaging().getTotalPages()-queryBill.getPaging().getCurrentPage() gt 3)}"
                        th:each="pageNum:${#numbers.sequence(queryBill.getPaging().getCurrentPage()-1,
                                queryBill.getPaging().getCurrentPage()+1)}">
                        <a th:href="'/bill/to/view?currentPage=' + ${pageNum} +'&customerId='+${customerId}
                       + '&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}" th:text="${pageNum + 1}"
                           th:if="${pageNum ne queryBill.getPaging().getCurrentPage()}">
                        </a>
                        <a th:href="'/bill/to/view?currentPage=' + ${pageNum} +'&customerId='+${customerId}
                       + '&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}" th:text="${pageNum + 1}"
                           th:if="${pageNum eq queryBill.getPaging().getCurrentPage()}"
                           th:style="'font-weight:bold;background: #6faed9;'">
                        </a>
                    </li>
                    <li th:if="${(queryBill.getPaging().getCurrentPage() gt 4) && 
                        (queryBill.getPaging().getTotalPages()-queryBill.getPaging().getCurrentPage() gt 3)}">
                        <a  th:href="'/bill/to/view?currentPage=' +${queryBill.getPaging().getCurrentPage() + 2} +'&customerId='+${customerId}
                       + '&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}">...</a>
                    </li>

                    <!-- 下一页 -->
                    <li th:if="${queryBill.getPaging().getCurrentPage() lt queryBill.getPaging().getTotalPages()-1}">
                        <a th:href="'/bill/to/view?currentPage=' + ${queryBill.getPaging().getCurrentPage()+1}+'&customerId='+${customerId}
                       +'&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}"
                           th:text="下一页"></a>
                    </li>

                    <!-- 尾页 -->
                    <li th:if="${queryBill.getPaging().getCurrentPage() ne queryBill.getPaging().getTotalPages()-1}">
                        <a th:href="'/bill/to/view?currentPage=' + ${queryBill.getPaging().getTotalPages()-1}+'&customerId='+${customerId}
                       + '&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}">尾页</a>
                    </li>
                    
                </ul>
                
            </ul>
            
            <!-- 登录后的-->
            <ul th:if="${userName != null}" class="pagination pull-right no-margin">

                <!-- 处理页数小于等于7 的情况 -->
                <ul th:if="${(queryBill.getPaging().getTotalPages() lt 7) && (queryBill.getPaging().getTotalPages() ge 0)}"
                    class="pagination pull-right no-margin">
                    <li th:each="pageNum:${#numbers.sequence(0, queryBill.getPaging().getTotalPages() - 1)}">
                        <a 
                                th:href="'/bill/to/view?currentPage=' + ${pageNum}+'&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}" 
                           th:text="${pageNum + 1}"
                           th:if="${pageNum ne queryBill.getPaging().getCurrentPage()}">
                        </a>
                        <a 
                                th:href="'/bill/to/view?currentPage=' + ${pageNum}+'&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}" th:text="${pageNum + 1}"
                           th:if="${pageNum eq queryBill.getPaging().getCurrentPage()}"
                           th:style="'font-weight:bold;background: #6faed9;'"></a>
                    </li>
                </ul>
                
                <ul th:if="${(queryBill.getPaging().getTotalPages() ge 7)}"class="pagination pull-right no-margin">
                    <!-- 首页 -->
                    <li th:if="${queryBill.getPaging().getCurrentPage() ne 0}">
                        <a th:href="'/bill/to/view?currentPage=0&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}">首页</a>
                    </li>

                    <!-- 上一页 -->
                    <li th:if="${queryBill.getPaging().getCurrentPage() gt 0}">
                        <a th:href="'/bill/to/view?currentPage=' + ${queryBill.getPaging().getCurrentPage()-1} +'&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}"
                           th:text="上一页"></a>
                    </li>

                    <!-- 当前页面小于等于4 -->
                    <li th:if="${queryBill.getPaging().getCurrentPage() le 4}"
                        th:each="pageNum:${#numbers.sequence(0,4)}">
                        <a th:href="'/bill/to/view?currentPage='+ ${pageNum} +'&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}" th:text="${pageNum + 1}"
                           th:if="${pageNum ne queryBill.getPaging().getCurrentPage()}">
                        </a>
                        <a th:href="'/bill/to/view?currentPage='+ ${pageNum} +'&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}" th:text="${pageNum + 1}"
                           th:if="${pageNum eq queryBill.getPaging().getCurrentPage()}"
                           th:style="'font-weight:bold;background: #6faed9;'">
                        </a>
                    </li>
                    <li th:if="${queryBill.getPaging().getCurrentPage() le 4}">
                        <a th:href="'/bill/to/view?currentPage=5'+'&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}">...</a>
                    </li>

                    <!-- 最后一页与当前页面之差小于等于3 -->
                    <li th:if="${queryBill.getPaging().getTotalPages()-queryBill.getPaging().getCurrentPage() le 3}">
                        <a 
                                th:href="'/bill/to/view?currentPage=' + ${queryBill.getPaging().getTotalPages() -5} +'&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}">...</a>
                    </li>
                    <li th:if="${queryBill.getPaging().getTotalPages()-queryBill.getPaging().getCurrentPage() le 3}"
                        th:each="pageNum:${#numbers.sequence(queryBill.getPaging().getTotalPages()-4,
                            queryBill.getPaging().getTotalPages()-1)}">
                        <a th:href="'/bill/to/view?currentPage='+ ${pageNum} +'&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}" th:text="${pageNum + 1}"
                           th:if="${pageNum ne queryBill.getPaging().getCurrentPage()}">
                        </a>
                        <a th:href="'/bill/to/view?currentPage='+ ${pageNum} +'&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}" th:text="${pageNum + 1}"
                           th:if="${pageNum eq queryBill.getPaging().getCurrentPage()}"
                           th:style="'font-weight:bold;background: #6faed9;'">
                        </a>
                    </li>

                    <!-- 最后一页与当前页面之差大于3 且当前页面大于4 -->
                    <li th:if="${(queryBill.getPaging().getCurrentPage() gt 4) && 
                            (queryBill.getPaging().getTotalPages()-queryBill.getPaging().getCurrentPage() gt 3)}">
                        <a 
                                th:href="'/bill/to/view?currentPage=' + ${queryBill.getPaging().getCurrentPage() -2} +'&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}">...</a>
                    </li>
                    <li th:if="${(queryBill.getPaging().getCurrentPage() gt 4) && 
                            (queryBill.getPaging().getTotalPages()-queryBill.getPaging().getCurrentPage() gt 3)}"
                        th:each="pageNum:${#numbers.sequence(queryBill.getPaging().getCurrentPage()-1,
                                queryBill.getPaging().getCurrentPage()+1)}">
                        <a th:href="'/bill/to/view?currentPage=' + ${pageNum} +'&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}" th:text="${pageNum + 1}"
                           th:if="${pageNum ne queryBill.getPaging().getCurrentPage()}">
                        </a>
                        <a th:href="'/bill/to/view?currentPage=' + ${pageNum} +'&type=' +${searchVo.type}" th:text="${pageNum + 1}"
                           th:if="${pageNum eq queryBill.getPaging().getCurrentPage()}"
                           th:style="'font-weight:bold;background: #6faed9;'">
                        </a>
                    </li>

                    <li th:if="${(queryBill.getPaging().getCurrentPage() gt 4) && 
                        (queryBill.getPaging().getTotalPages()-queryBill.getPaging().getCurrentPage() gt 3)}">
                        <a 
                                th:href="'/bill/to/view?currentPage=' +${queryBill.getPaging().getCurrentPage() + 2} +'&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}">...</a>
                    </li>

                    <!-- 下一页 -->
                    <li th:if="${queryBill.getPaging().getCurrentPage() lt queryBill.getPaging().getTotalPages()-1}">
                        <a th:href="'/bill/to/view?currentPage=' + ${queryBill.getPaging().getCurrentPage()+1}+'&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}"
                           th:text="下一页"></a>
                    </li>

                    <!-- 尾页 -->
                    <li th:if="${queryBill.getPaging().getCurrentPage() ne queryBill.getPaging().getTotalPages()-1}">
                        <a 
                                th:href="'/bill/to/view?currentPage=' + ${queryBill.getPaging().getTotalPages()-1}+'&type=' +${searchVo.type} + '&startTime=' +${searchVo.startTime} + '&endTime=' + ${searchVo.endTime}">尾页</a>
                    </li>
                    
                </ul>
            </ul>
        </div>
    </div>
</div>


<script type="text/javascript">
    function index(){
        location.href="/bill/to/index";
    }

    $("#reset").click(function(){
        $(".form-inline input").each(function(){
            $(this).val('');
        });
        $(".form-inline select").each(function(){
            $(this).val('');
        });
    })
    
</script>
</body>
</html>
